<template>
  <div class="container-person">
    <div class="header">
      <div class="picture"></div>
      <span>namename</span>
      <i class="iconfont icon-bianji"></i>
    </div>
    <div class="body-person">
      <div class="my-collection">
        <i class="iconfont icon-shoucangjia"></i>&nbsp;我的收藏
      </div>
      <div class="collect-point">
        <i class="iconfont icon-xingxing"></i>&nbsp;收藏点显示于图面
        <span class="xuanzhong">
          <i class="iconfont icon-duigouxiao"></i>
        </span>
      </div>
      <div class="theme">
        <div class="top">
          <i class="iconfont icon-zhuti"></i>&nbsp;主题<span
            >室内地图仅用于标准模式</span
          >
        </div>
        <div class="bottom">
          <div class="first active-pm" @click="handleThemeChange('biaozhun')">
            <div class="biaozhun-ditu"></div>
            <p>标准</p>
          </div>
          <div class="second" @click="handleThemeChange('blue')">
            <div class="lan-ditu"></div>
            <p>凝黛蓝</p>
          </div>
          <div class="third" @click="handleThemeChange('black')">
            <div class="hei-ditu"></div>
            <p>魅夜黑</p>
          </div>
        </div>
      </div>
      <div class="exit-login">
        <i class="iconfont icon-tuichu"></i>&nbsp;退出登录
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue' 
const currentTheme = ref('biaozhun')
const emit = defineEmits(['themeChanged'])

const handleThemeChange = (theme) => {
  document.querySelectorAll('.bottom > div').forEach((el) => {
    el.classList.remove('active-pm');
  });
  switch (theme) {
    case 'biaozhun':
      document.querySelector('.bottom .first').classList.add('active-pm');
      currentTheme.value = 'biaozhun';
      break;
    case 'blue':
      document.querySelector('.bottom .second').classList.add('active-pm');
      currentTheme.value = 'blue'
      break;
    case 'black':
      document.querySelector('.bottom .third').classList.add('active-pm');
      currentTheme.value = 'black'
      break;
    default:
      console.log('未知主题');
      break;
  }
  emit('themeChanged',currentTheme.value)//向中间组件传参
};
</script>

<style lang="scss" scoped>
.container-person {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 65px;
  right: 10px;
  width: 250px;
  height: 300px;
  background-color: #f8f8f8;
  border-radius: 10px;
  .header {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color: #52acf6;
    color: white;
    height: 65px;
    .picture {
      width: 34px;
      height: 34px;
      border: 1px solid white;
      border-radius: 50%;
      background-image: url(../../public/默认头像.png);
      background-size: cover;
      background-position: center;
    }
  }
  .body-person {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .my-collection {
      padding: 10px 10px;
      cursor: pointer;
    }
    .collect-point {
      padding: 10px 10px;
      cursor: pointer;
    }
    .theme {
      padding: 10px 10px;
      span {
        font-size: 0.5em;
        color: #c4c5c6;
        margin-left: 20px;
      }
      .bottom {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-top: 10px;
        .biaozhun-ditu {
          width: 56px;
          height: 43px;
          background-image: url(../../public/标准.png);
          cursor: pointer;
        }
        .lan-ditu {
          width: 56px;
          height: 42px;
          background-image: url(../../public/蓝底图.png);
          cursor: pointer;
        }
        .hei-ditu {
          width: 56px;
          height: 42px;
          background-image: url(../../public/黑底图.png);
          cursor: pointer;
        }
      }
    }
    .exit-login {
      padding: 10px 10px;
      cursor: pointer;
    }
  }
}
.active-pm {
  position: relative;
}
.active-pm::after {
  display: block;
  content: '';
  width: 56px;
  height: 15px;
  background-color: lightblue;
  position: absolute;
  left: 0px;
  bottom: 20px;
}
</style>
